<template>
  <div class="container">
    <!-- <validate :visible="visible" :cb="validateCb" @close="visible = false" /> -->
    <div class="form">
      <div class="form-item">
        <div class="form-item-label">企业名称</div>
        <div class="form-item-val">
          <input type="text" value="深圳银灯物联科技有限公司" placeholder="请输入" />
        </div>
      </div>
      <div class="form-item">
        <div class="form-item-label">社会信用代码</div>
        <div class="form-item-val">
          <input type="text" value="914403009857808211" placeholder="请输入" />
        </div>
      </div>
      <div class="form-item">
        <div class="form-item-label">申请人姓名</div>
        <div class="form-item-val">
          <input type="text" value="陈雨昕" placeholder="请输入" />
        </div>
      </div>
      <div class="form-item">
        <div class="form-item-label">申请人证件号</div>
        <div class="form-item-val">
          <input type="text" value="430104198006021636" placeholder="请输入" />
        </div>
      </div>
      <div class="form-item">
        <div class="form-item-label">申请人银行卡号</div>
        <div class="form-item-val">
          <input type="text" value="6230580100001094831" placeholder="请输入" />
        </div>
      </div>
      <div class="form-item">
        <div class="form-item-label">预留手机号</div>
        <div class="form-item-val">
          <input type="number" v-model="form.phone" placeholder="请输入" />
        </div>
      </div>
      <div class="form-item">
        <div class="form-item-label">婚配信息</div>
        <div class="form-item-val">
          <van-radio-group v-model="radio" direction="horizontal" class="radio">
            <van-radio name="1">已婚</van-radio>
            <van-radio name="0">未婚</van-radio>
          </van-radio-group>
        </div>
      </div>
      <template v-if="radio == 1">
        <div class="form-item">
          <div class="form-item-label">配偶姓名</div>
          <div class="form-item-val">
            <input type="text" value="" placeholder="请输入" />
          </div>
        </div>
        <div class="form-item">
          <div class="form-item-label">配偶证件号码</div>
          <div class="form-item-val">
            <input type="text" value="" placeholder="请输入" />
          </div>
        </div>

        <div class="form-item">
          <div class="form-item-label">已确认配偶知悉</div>
          <div class="form-item-val">
            <van-radio-group
              v-model="radio2"
              direction="horizontal"
              class="radio"
            >
              <van-radio name="1">是</van-radio>
              <van-radio name="0">否</van-radio>
            </van-radio-group>
          </div>
        </div>
      </template>
    </div>

    <servicer />
    <div class="loan-btn" :class="{ active: canNext }" @click="toNext">
      下一步
    </div>
    <img
      src="../assets/images/common/voice.png"
      alt=""
      class="voice-img"
      @click="voiceOpen"
    />

    <!-- 语音：引导弹窗 -->
    <van-overlay :show="tipsVisible" @click="hideTipsModal">
      <img
        src="../assets/images/common/tips.png"
        alt=""
        class="tips-img"
        @click="handleVoice"
      />
    </van-overlay>

    <!-- 语音：弹窗 -->
    <van-overlay
      :show="voiceVisible"
      :class-name="'voice-modal'"
      @touchend="voiceEnd"
    >
      <div class="voice-cont">
        <input
          class="voice-cont-text"
          v-if="voiceState === 'end'"
          v-model="voiceText"
        />
        <div
          class="voice-cont-img"
          :class="{ active: voiceState === 'ing' }"
          v-else
        ></div>
      </div>

      <div
        class="voice-footer"
        :class="{ active: voiceState !== 'start' }"
        @touchstart.prevent="voiceStart"
      >
        <img
          src="../assets/images/voice/voice_play.png"
          alt=""
          class="voice-img-play"
          @touchend.prevent="handleVoice"
        />

        <template v-if="voiceState !== 'start'">
          <img
            src="../assets/images/voice/back.png"
            alt=""
            class="voice-img-handle back"
            @touchstart.stop="voiceBack"
          />
          <img
            src="../assets/images/voice/enter.png"
            alt=""
            class="voice-img-handle right"
            @touchstart.stop="voiceEnter"
          />
        </template>
        <img
          src="../assets/images/voice/close.png"
          alt=""
          class="voice-img-handle"
          @click="voiceClose"
          v-else
        />
      </div>
    </van-overlay>
  </div>
</template>

<script>
// import Validate from '@/components/Validate'
import Servicer from '@/components/Servicer'

export default {
  components: {
    Servicer
  },
  data () {
    return {
      tipsVisible: true,
      voiceVisible: false,
      voiceActive: false,
      voiceState: 'start', // [start, ing, end]
      voiceText: '手机号码是 18279741082',
      canNext: false,
      radio: '0',
      radio2: 0,
      form: {
        phone: ''
      }
    }
  },
  mounted () {},
  methods: {
    toNext () {
      if (!this.canNext) return
      this.$router.push({
        path: '/face'
      })
    },
    handleVoice () {},
    hideTipsModal () {
      this.tipsVisible = false
    },
    voiceOpen () {
      this.voiceVisible = true
      this.voiceState = 'start'
    },
    voiceStart () {
      this.voiceState = 'ing'
    },
    voiceEnd () {
      if (this.voiceState !== 'ing') return
      this.voiceState = 'end'
    },
    voiceClose (e) {
      e.prevent()
      this.voiceVisible = false
    },
    voiceBack (e) {
      e.prevent()
      this.voiceState = 'start'
    },
    voiceEnter (e) {
      this.form.phone = 18279741082
      this.voiceVisible = false
      this.canNext = true
    }
  }
}
</script>

<style lang="less" scoped>
.form {
  padding: 40px 28px;
  color: #fff;
  background-image: url("../assets/images/loan/border_pck3.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: none;
  // border: 1px solid #fff;
  text-align: left;

  .form-item {
    font-size: 14px;
    & + .form-item {
      margin: 30px 0 0 0;
    }
    .form-item-label {
      display: inline-block;
    }
    .form-item-val {
      // display: inline-block;
      float: right;
      text-align: right;
      input {
        width: auto;
        text-align: right;
        color: #64abff;
        background: none;
        border: none;
      }
    }
  }
}

.loan-btn {
  display: block;
  margin: 42px auto;
  width: 192px;
  height: 70px;
  line-height: 70px;
  // border: 1px solid #ccc;
  background-image: url("../assets/images/loan/btn.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: none;
  color: ccc;
  font-size: 20px;

  &.active {
    color: #fff;
    background-image: url("../assets/images/loan/btn_active.png");
  }
}

.radio {
  /deep/ .van-radio__label {
    color: #64abff;
  }
}

.voice-img {
  position: fixed;
  display: block;
  width: 80px;
  right: 0;
  margin-top: -120px;
  z-index: 10;
}

.tips-img {
  position: fixed;
  display: block;
  width: 80%;
  right: 10%;
  top: 30px;
  z-index: 9;
}

.voice-modal {
  z-index: 100;
  .voice-cont {
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 10%;
    width: 80%;
    height: 80px;
    padding: 20px 24px;
    line-height: 80px;
    background-image: linear-gradient(180deg, #2169f2 0%, #3440d3 100%);
    border-radius: 25px;
    border-radius: 25px;
    transform: translateY(-50%);

    .voice-cont-text {
      display: block;
      width: 100%;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      line-height: 40px;
      color: #ffffff;
      text-align: center;
      background: none;
    }

    .voice-cont-img {
      // margin: 0 70px;
      margin-top: 10px;
      height: 26px;
      width: 100%;
      background-image: url("../assets/images/voice/voice.png");
      background-size: 200% 100%;
      background-position: 0 0;
      animation-delay: 0;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
      &.active {
        animation-name: run;
      }
    }
    @keyframes run {
      0% {
        background-position: 0 0;
      }
      100% {
        background-position: -252px 0;
      }
    }
  }

  .voice-footer {
    position: fixed;
    bottom: -86px;
    width: 100%;
    height: 192px;
    background: rgba(13, 43, 140, 0.38);
    border-radius: 100% 100% 0 0;
    .voice-img-play {
      position: absolute;
      width: 25px;
      top: 32px;
    }
    .voice-img-handle {
      position: absolute;
      width: 50px;
      bottom: 100%;
      left: 15%;
      z-index: 2;
      &.back{
        padding: 8px;
      }
      &.right{
        left: auto;
        right: 15%;
      }
    }

    &.active,
    &:active,
    &:hover,
    &:focus {
      background: rgba(13, 43, 140, 0.9);
    }
  }
}
</style>
